<template>
  <ContentCard>
    <template #header>
      <pageHeaderNew :title="title"></pageHeaderNew>
    </template>
    <div class="search-box">
      <div>
        <a-space>
          <a-input-search
            :style="{ width: '420px' }"
            placeholder="搜索"
            style="margin-bottom: 8px; max-width: 240px"
          />
        </a-space>
      </div>
      <div>
        <a-space>
          <a-button type="primary" @click="openAddModal">
            <template #icon>
              <icon-plus />
            </template>
            <template #default>新增角色互斥</template>
          </a-button>
        </a-space>
      </div>
    </div>
    <TableTurn
      :tableData="getTableData"
      :args="args"
      ref="tableRef"
      :isShowPagination="false"
    >
      <a-table-column :width="60" title="序号" fixed="left">
        <template #cell="{ rowIndex }">
          {{ rowIndex + 1 }}
        </template>
      </a-table-column>
      <a-table-column :width="150" dataIndex="roleName" title="角色名称">
      </a-table-column>
      <!-- <a-table-column :width="150" dataIndex="menuName" title="菜单类型">
        <template #cell="{ record }">{{
          record.menuType === 1
            ? '目录'
            : record.menuType === 2
            ? '路由'
            : record.menuType === 3
            ? 'api'
            : 'api和路由'
        }}</template>
      </a-table-column> -->
      <a-table-column :width="150" dataIndex="describe" title="最后活跃时间">
        <template #cell="{ record }">{{
          dayjs(record.updatedAt).format('YYYY-MM-DD')
        }}</template>
      </a-table-column>
      <a-table-column :width="150" title="操作">
        <template #cell="{ record }"
          ><a-space>
            <a-link @click="emit(record)">修改角色</a-link>
            <a-link
              v-if="record.canItDelete === 1"
              status="danger"
              @click="del(record)"
              >删除角色</a-link
            >
          </a-space></template
        >
      </a-table-column>
    </TableTurn>
  </ContentCard>
  <RoleModal
    v-model:visible="modelVisible"
    v-if="modelVisible"
    :editCompanyForm="editCompanyForm"
    @addRoleExclusive="addRoleExclusive"
  ></RoleModal>
</template>

<script lang="ts" setup>
import RoleModal from './components/RoleModal.vue';
import {
  getRoleExclusiveList,
  postRoleExclusive
} from '@/apis/roleManagement/index';
import dayjs from 'dayjs';

const title = '角色互斥';
import { join } from 'lodash';
const modelVisible = ref(false);
const openAddModal = () => {
  modelVisible.value = true;
};
const userInfo = Number(localStorage.getItem('roleId') as any);
const editCompanyForm = ref<any>({});
const tableRef = ref();
const getTableData = async (page: any) => {
  try {
    const res = await getRoleExclusiveList({ roleId: userInfo.roleList[0].id });
    return Promise.resolve(res.list);
  } catch (err: unknown) {
    console.log(err);
  }
};

const addRoleExclusive = async (res: any, key: string) => {
  if (key === 'add') {
    await postRoleExclusive({
      masterRoleId: userInfo.roleList[0].id,
      mutuallyExclusiveRoleIds: res.mutuallyExclusiveRoleIds
    });
    tableRef.value.loadData();
  }
};
</script>

<style lang="less" scoped>
.search-box {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  width: 96%;
  margin: 10px;
}
</style>
